<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
    <title>许愿猫</title>
    <script src="${ctx}/js/jquery1.8.2.min.js"></script>
    <link rel="stylesheet" href="${ctx}/css/reset.css">
</head>
<style>
    .page_box {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        overflow-y: auto;
        overflow-x: hidden;
        background: #F2F6F9;
        min-width: 320px;
    }

    .show_box {
        width: 80%;
        max-width: 1300px;
        margin: 0 auto;
        overflow: hidden;
        padding: 20px 0;
    }

    .flex_box {
        display: flex;
        align-items: center;
    }

    .header {
        background: #fff;
        color: #333;
        padding: 15px;
        justify-content: space-between;
    }

    .logo {
        width: 120px;
        height: 120px;
        border-radius: 10px;
        padding: 12px;
        box-sizing: border-box;
        background: #F4F4F4;
    }

    .logo img {
        width: 100%;
        height: 100%;
    }

    .detail {
        margin-left: 20px;
    }

    .title {
        margin-bottom: 20px;
    }

    .title span {
        font-size: 24px;
        font-weight: 600;

    }

    .title em {
        display: none;
    }

    .mark {
        display: inline-block;
        line-height: 16px;
        font-size: 12px;
        border: 1px solid #267DEB;
        color: #267DEB;
        padding: 0 6px;
        border-radius: 2px;
        margin-left: 15px;
    }

    .score {
        margin-bottom: 20px;
        font-size: 20px;
    }

    .score img {
        width: 20px;
    }

    .score .star {
        margin-right: 20px;
    }

    .status {
        color: #999;
        font-size: 14px;
    }

    .status p {
        margin-right: 40px;
    }

    .status p:last-child {
        margin-right:0
    }

    .status .mark {
        border: 1px solid #dcdcdc;
        color: #999;
    }

    .btn a {
        color: #fff;
        font-size: 18px;
        background: #57C45D;
        margin-top: 15px;
        height: 45px;
        border-radius: 2px;
        padding: 0 20px;
        text-decoration: none;
    }

    .btn a:first-child {
        margin-top: 0
    }

    .btn a img {
        width: 35px;
    }

    .qrcode {
        text-align: center;
        margin-left: 30px
    }

    .qrcode img {
        width: 90px;
        height: 90px;
    }

    .qrcode p {
        margin-top: 4px;
        color: #999;
        font-size: 14px;
    }

    .body_box {
        margin-top: 20px;
        background: #fff;
        padding: 20px;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    .demo img {
        width: calc(25% - 24px);
        margin-left: 27px;
    }

    .demo img:first-child {
        margin-left: 0
    }

    .version {
        display: table;
    }

    .version div {
        margin-right: 30px;
        font-size: 14px;
        color: #666;
        margin-top: 20px;
        float: left;
    }

    .app_info {
        margin-top: 20px;
    }

    .app_title {
        font-weight: 600;
        font-size: 18px;
    }

    .app_intro {
        margin-top: 10px;
        font-size: 14px;
        text-align: justify;
        line-height: 20px;
    }

    .footer_box {
        display: flex;
        justify-content: center;
        margin-top: 50px;
        height: 20px;
        line-height: 20px;
    }

    .footer_box  div {
        margin-right: 30px;
        font-size: 14px;
        color: #666;
    }

    .footer_box  div:last-child {
        margin-right:0;
    }

    .footer_box a{
        color: #666;
    }


    @media screen and (max-width: 1200px) {
        .page_box {
            width: 100%;
        }
        .show_box {
            width: 100%;
            max-width: 100%;
            padding: 0;
        }
    }
    @media screen and (max-width: 640px) {
        .header {
            display: block;
        }

        .intro {
            display: block;
        }

        .logo {
            width: 80px;
            height: 80px;
            border-radius: 6px;
            padding: 5px;
            margin: 0 auto;
        }

        .title {
            justify-content: center;

        }

        .title span {
            font-size: 20px;
        }

        .title em {
            display: inline-block;
            font-style: normal;
            font-size: 14px;
            margin-left: 10px;
            color: #666;
        }

        .detail {
            width: 100%;
            margin: 25px 0 0;
        }

        .btn {
            width: 100%;
            margin-top:15px;
        }

        .btn a {
            justify-content: center;
            width:60%;
            height: 38px;
            margin:0 auto;
            font-size: 16px;
        }

        .btn a:last-child {
            display: none;
        }

        .btn a img {
            width: 30px;
        }

        .score {
            display: none;
        }

        .status {
            justify-content: space-between;
            padding: 0 10px;
        }
        .status p{
            margin: 0;
        }
        .status .mark{
            margin-left: 0;
        }
        .qrcode {
            display: none;
        }

        .demo {
            width: 100%;
            overflow-x: scroll;
            overflow-y: hidden;
            display: -webkit-box;
            padding-bottom: 10px;
            display: -moz-box;
            display: -ms-flexbox;
            -webkit-overflow-scrolling: touch;
        }

        .demo::-webkit-scrollbar {
            display: none;
        }

        .demo img {
            width: 120px;
            display: block;
            margin-left: 10px;
        }

        .version div {
            margin-right: 0;
        }

        .footer_box {
            display: block;
            height: auto;
            margin-top: 20px;
            padding-bottom: 20px;
        }

        .footer_box  div {
            margin-right: 0;
            text-align: center;
        }

    }

    @media screen and (max-width: 320px) {
        .status {
            font-size: 12px;
        }
    }
</style>
<body>
<div class="page_box">
    <div class="show_box">
        <div class="header flex_box">
            <div class="intro flex_box">
                <div class="logo">
                    <img src="${ctx}/image/cat/logo.png">
                </div>
                <div class="detail">
                    <div class="title flex_box">
                        <span>许愿猫</span>
                        <i class="mark">官网</i>
                        <em>4.9分</em>
                    </div>
                    <div class="score flex_box">
                        <div class="star">
                            <img src="${ctx}/image/propagate/star1.png">
                            <img src="${ctx}/image/propagate/star1.png">
                            <img src="${ctx}/image/propagate/star1.png">
                            <img src="${ctx}/image/propagate/star1.png">
                            <img src="${ctx}/image/propagate/star2.png">
                        </div>
                        <span>4.9分</span>
                    </div>
                    <div class="status flex_box">
                        <p>34万下载 ▪ 13.5M ▪ 无广告</p>
                        <p class="flex_box">分类：<i class="mark">生活</i></p>
                    </div>
                </div>
            </div>
            <div class="download flex_box">
                <div class="btn">
                    <a class="flex_box" href="http://apk.hotbuybuy.com/xym_yingyongbao_100_100_jiagu_sign.apk">
                        <img src="${ctx}/image/propagate/app.png"/>
                        <span>安装到手机</span>
                    </a>
                    <a class="flex_box" href="http://apk.hotbuybuy.com/xym_yingyongbao_100_100_jiagu_sign.apk">
                        <img src="${ctx}/image/propagate/pc.png"/>
                        <span>立即下载</span>
                    </a>
                </div>
<#--                <div class="qrcode">-->
<#--                    <img src="${ctx}/image/propagate/qr_code.png">-->
<#--                    <p>微信扫一扫下载</p>-->
<#--                </div>-->
            </div>
        </div>
        <div class="body_box">
            <div class="demo">
                <img src="../../static/image/cat/demo1.png">
                <img src="../../static/image/cat/demo2.png">
                <img src="../../static/image/cat/demo3.png">
                <img src="../../static/image/cat/demo4.png">
            </div>
            <div class="version">
                <div>版本号：V1.0.0</div>
                <div>更新时间：2020年5月13日</div>
                <div>开发商：厦门口袋零钱网络科技有限公司</div>
            </div>
            <div class="app_info">
                <p class="app_title">应用信息</p>
                <div class="app_intro">
                    <p>一款真实的抽奖类应用</p>
                    <p>许愿猫是一款真实有效的抽奖类app，用户每天都有定量的抽奖机会启动抽奖，而且每个人都有一样的公平的概率来抽中奖品。奖品真实有效，抽中即发。</p>
                    <p>【许愿墙】 提供一定数量的奖品，任意选择；</p>
                    <p>【许愿池】 奖品来源，抽中的奖品来自许愿池；</p>
                    <p>【我的礼盒】 许愿实现抽中的奖品都在礼盒；</p>
                    <p>【中奖记录】 幸记录运足迹；</p>
                    <p>【喵一下】 点击喵一下，启动中奖，抽中后奖品就能到手。</p>
                </div>
            </div>
        </div>
        <div class="footer_box">
            <div>版权所有：厦门口袋零钱网络科技有限公司</div>
            <div>备案号：<a href="http://www.beian.miit.gov.cn/" target="_blank">闽ICP备20004855号-2</a></div>
        </div>
    </div>
</div>
</body>
</html>
<script>
</script>
